<template>
    <div>
        用户名:<input type="text" v-model="username"><br>
        密码:<input type="text" v-model="password"><br>
        <button v-if="flag" @click="vo">注册</button><br>
        <input type="checkbox" @click="flag = !flag">请接受许可协议
        <p v-if="error">{{ error }}</p>
        <p v-if="success">{{ success }}</p>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref()
const username = ref('')
const password = ref('')
const error = ref('')
const success = ref('')
const vo = () => {

    if (username.value === '' || password.value === '') {
        error.value = '用户名和密码不能为空！'
        success.value = ''
    }

    else {
        success.value = '注册成功,欢迎' + username.value
        error.value = ''

    }

}
</script>

<style>
p {
    color: red;
}
</style>





<style>
button {
    float: left;
}
</style>